<template>
	<view class="height-100 bg-gray overflow-hidden">
		<view class="position-fixed-top bg-white padding-tb-sm padding-lr" style="z-index: 999;">
			<view class="flex-direction-row align-center">
				<view class="radius-sl bg-gray flex-direction-row align-center padding-tb-xsm padding-lr flex-sub">
					<text class="text-df iconfont color-black-q">&#xe6c6;</text>
					<!-- <input type="text" class="flex-sub padding-lr-xs text-smd" placeholder="搜索订单" /> -->
					<input type="text" class="flex-sub padding-lr-xs text-smd" placeholder="请输入话术名称" placeholder-class="text-smd"
						:focus="true" v-model="searchText" maxlength="20" @confirm="search" confirm-type="搜索" @input="input" />
				</view>
				<text class="text-smd color-black-b padding-sm" @click="getData">搜索</text>
			</view>
		</view>
		<view class="flex-direction-row flex-wrap padding-sm" style="margin-top: 60px;">
			<text v-for="(user, index) in trickList" :key="user.value" @click="chooseType(index)" :class="getClassObject(index)">{{user.label}}</text>
		</view>
		<view v-for="item in verbalList" :key="item.id" class="bg-white radius-xl padding margin-top" style="margin: 10px 20px">
			<text class="text-lg">{{item.name}}</text>
			<view class="">
				<text class="text-df color-black-q">{{item.content}}</text>
			</view>
			<view class="padding-tb-sm bg-df radius-sl text-center" @click="copyText(item.content)">
				<text class="text-lg color-white">复制</text>
			</view>
		</view>
	<!-- 	<view v-if="loading" class="loading">
			加载中...
		</view> -->
	</view>
</template>

<script>
	import {
		tacticsManagementList
	} from "@/common/my.js"
	export default {
		data() {
			return {
				loading: false,
				hasMore: true,
				searchText:'',
				chooseName: '',
				pageNum: 1,
				pageSize: 20,
				verbalList: [],
				trickList: [
					{
						value: 0,
						label: '关怀话术'
					},
					{
						value: 1,
						label: '测量提醒'
					},
					{
						value: 2,
						label: '疾病知识'
					},
					{
						value: 3,
						label: '生活建议'
					},
					{
						value: 4,
						label: '饮食建议'
					},
					{
						value: 5,
						label: '运动建议'
					},
				]
			}
		},
		onLoad() {
			this.getData();
		},
		methods: {
			onReachBottom() {
				console.log(1111);
			    // if (this.hasMore && !this.loading) {
			    //   this.loadMore();
			    // }
			},
			async getData() {
				const res = await tacticsManagementList({
					tacticsTypeCode: this.chooseName,
					name: this.searchText,
					// pageNum: this.pageNum,
					// pageSize: this.pageSize,
				});
				// console.log(res, 1);
				this.verbalList = res.rows || []
			},
			search() {
				console.log(this.searchText)
				this.getData();
			},
			input(e) {
				if (this.isSearch && e.detail.value === '') {
					this.isSearch = false
				}
			},
			chooseType(index) {
				this.chooseName = index
				this.getData();
			},
			copyText(text) {
				console.log(text);
				uni.setClipboardData({
					data: text,
					success: () => {
					  uni.showToast({
						title: '复制成功',
						icon: 'success'
					  });
					},
					fail: () => {
					  uni.showToast({
						title: '复制失败',
						icon: 'none'
					  });
					}
				  });
			},
			getClassObject(index) {
			  return {
				'text-sm': true,
				'padding-tb-xsm': true,
				'padding-lr': true,
				'radius-sl': true,
				'border-gray': true,
				'margin-xs': true,
				'chooseClass': index === this.chooseName,
			  };
			}
		}
	}
</script>

<style scoped>
	.chooseClass {
		color: #FFFFFF!important;
		background-color: #D93722;
	}
	.loading {
	  text-align: center;
	  padding: 0px 20px 20px 20px;
	}
</style>
